<template>
  <!-- 首页帮助指南 -->
  <div class="help-center-frame">
    <!-- 帮助中心标题 -->
    <div class="page-block-title">
      <div class="help">帮助指南</div>
      <div
        class="text-primary"
        @click="() => router.push('/serviceCenter/helpGuide')"
      >
        查看全部
      </div>
    </div>
    <!-- 列表 -->
    <div class="help-frame">
      <div
        class="help-title one-line-show text-hover-primary"
        v-for="(item, index) in helpData"
        :key="index"
        @click="handleItemClick(item)"
      >
        【热门问题】 {{ item.name }}
      </div>
    </div>
    <el-dialog
      v-model="dialogConfig.dialogVisible"
      :title="dialogConfig.title"
      width="1026"
    >
      <div v-html="dialogConfig.content" class="rich-text"></div>
      <template #footer>
        <el-button
          type="primary"
          size="large"
          @click="dialogConfig.dialogVisible = false"
        >
          确认
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();
// 模块api
import dashboard from '@/modules';
const { helpListApi } = dashboard;
// 弹窗配置
const dialogConfig = reactive({
  dialogVisible: false,
  title: '帮助指南',
  content: '',
});
// 数据列表
const helpData = ref([]);
// 获取列表
const getHelpList = async () => {
  const { data } = await helpListApi({
    page: 1,
    pageSize: 8,
    type: '1',
  });
  helpData.value = data.data;
};
// 打开弹窗
const handleItemClick = (row) => {
  dialogConfig.dialogVisible = true;
  dialogConfig.title = row.name;
  dialogConfig.content = row.content;
};
onMounted(() => {
  // 获取列表
  getHelpList();
});
</script>

<style lang="scss" scoped src="./index.scss"></style>
